<template>
  <el-drawer
    :model-value="props.modelValue"
    :before-close="close"
    :append-to-body="true"
    :destroy-on-close="true"
    size="50%"
  >
    <template #header>
      <div v-if="node" class="v-flow-config-drawer-title">
        <template v-if="node.type === 0">
          <i class="icon iconfont">&#xe7d0;</i>
          <h4 class="drawer-title">{{ node.name }}</h4>
        </template>
        <template v-else>
          <i class="icon iconfont" v-if="node.type === 1">&#xe65e;</i>
          <i class="icon iconfont" v-if="node.type === 2">&#xe65d;</i>
          <i class="icon iconfont" v-if="node.type === 3">&#xe70f;</i>
          <input
            class="drawer-input"
            v-focus
            v-if="isEdit"
            v-model="title"
            type="text"
            @blur="changeTitle"
          />
          <h4 v-else @click="editTitle(node.name)" class="drawer-title editabled">
            {{ node.name }}
          </h4>
          <i
            v-if="!isEdit"
            class="icon iconfont"
            @click="editTitle(node.name)"
            style="cursor: pointer"
            >&#xe6aa;</i
          >
        </template>
      </div>
    </template>
    <template #default>
      <div class="v-flow-config-drawer-body">
        <InitiatorIndex v-if="node.type === 0" />
        <AuditIndex v-if="node.type === 1" />
        <DeliverIndex v-if="node.type === 2" />
        <ConditionIndex v-if="node.type === 3" />
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import InitiatorIndex from './initiator/InitiatorIndex.vue'
import AuditIndex from './audit/AuditIndex.vue'
import DeliverIndex from './delivery/DeliverIndex.vue'
import ConditionIndex from './condition/ConditionIndex.vue'
import type { NodeItem, FormConfig, Actioner, Properties } from '../types'
import * as utils from './utils'
import * as FlowPanel from '../FlowPanel'
const { formList } = inject<{ formList: any }>('formData', {
  formList: []
})
const { currentNode } = inject<{ currentNode: NodeItem }>('drawer', {
  currentNode: FlowPanel.createNode()
})
const { editNode } = inject<{
  editNode: (node: NodeItem) => void
}>('flowTree', {
  editNode: () => {}
})
const props = defineProps(['modelValue'])
const emits = defineEmits(['update:modelValue'])
const node = ref<NodeItem>(currentNode) // 节点对象
const isEdit = ref<boolean>(false)
const title = ref<string>('')
// 编辑节点名称
const editTitle = (name: string) => {
  title.value = name
  isEdit.value = true
}
// 修改节点名称
const changeTitle = () => {
  node.value.name = title.value
  title.value = ''
  isEdit.value = false
}
const cancel = () => {
  emits('update:modelValue', false)
}
const confirm = () => {
  if (node.value.type === 3) {
    // todo 更新条件路由节点
  }
  // 确认编辑节点信息
  editNode(node.value)
  emits('update:modelValue', false)
}
const close = () => {
  emits('update:modelValue', false)
}

// 界面配置更新
provide('nodeConfig', {
  getFormData: () => {
    if (node.value.properties.formData?.length > 0) {
      return utils.updatedFormData(node.value.type, formList.value, node.value.properties.formData)
    } else {
      return utils.initFormData(node.value.type, formList.value)
    }
  },
  updateFormData: (data: FormConfig[]) => {
    node.value.properties.formData = data
  },
  getActioners: () => {
    return node.value.properties.actioners
  },
  updateActioners: (data: Actioner[]) => {
    node.value.properties.actioners = data
  },
  getProperties: () => {
    return node.value.properties
  },
  updateProperties: (data: Properties) => {
    node.value.properties = data
  }
})
</script>
